import React, { Component } from 'react';
import './../shiwen/common/common.scss';
import axios from 'axios';
import './mingjucontent.scss';
import $ from 'jquery';
let ziliao = {
  color: '#919090',
  lineHeight: 1.6
};
let ziliao1 = {
  color: '#919090',
  lineHeight: 1.6,
  fontSize:'12px'
};

class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  // goDetail (id) {
  //   console.log(this.props);
  //   this.props.history.push('/shiwendetail/' + id)
  // }
  
  getShowyi (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    var currentYi =$(currentNode).parent().parent().siblings('.content').children().children('.yi');
    var currentZiliaowrap = $(currentNode).parent().parent().siblings('.content').children('.ziliaowrap');
    if(currentYi.css('display') === 'none'){
      currentYi.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
      currentZiliaowrap.css('display','block');
    }else{
      currentYi.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
      currentZiliaowrap.css('display','none');
    }
    
  }
  getShowzhu (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    var currentShang =$(currentNode).parent().parent().siblings('.content').children().children('.shang');
    if(currentShang.css('display') === 'none'){
      currentShang.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
    }else{
      currentShang.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
    }
    
  }
  getShowshang (event) {
    console.log(event.currentTarget)
    var currentNode = event.currentTarget;
    currentNode.style.color = '#fff';
    currentNode.style.backgroundColor = '#9A9A9A';
    var currentAppreciation = $(currentNode).parent().parent().siblings('.content').children('.appreciation');
    if(currentAppreciation.css('display') === 'none'){
      currentAppreciation.css('display','block');
      currentNode.style.color = '#fff';
      currentNode.style.backgroundColor = '#9A9A9A';
    }else{
      currentAppreciation.css('display','none');
      currentNode.style.color = '#A0A09F';
      currentNode.style.backgroundColor = '';
    }
  }
  shiwenCollection (event) {
    console.log(event.currentTarget)
    var currentCollection = event.currentTarget;
    var uid = localStorage.getItem('uid')*1;
    var sid = localStorage.getItem('sid')*1;
    if($(currentCollection).children().attr('class') === 'iconfont icon-shoucang'){
      $(currentCollection).children().attr('class','iconfont icon-daohangshoucangyishoucang')
      console.log(uid,sid)
      axios.get(`http://poem.daxunxun.com:8000/api/collect/add?uid=${uid}&sid=${sid}`)
          .then((res) => {
            console.log(`http://poem.daxunxun.com:8000/api/collect/add?uid=${uid}&sid=${sid}`);
            console.log(res.data)
            alert('收藏成功');
            // this.setState({
            //   list:res.data,
            // })
          })
    }else{
      $(currentCollection).children().attr('class','iconfont icon-shoucang');
      axios.get(`http://poem.daxunxun.com:8000/api/collect/delete?uid=${uid}&sid=${sid}`,{})
          .then((res) => {
            console.log(`http://poem.daxunxun.com:8000/api/collect/delete?uid=${uid}&sid=${sid}`);
            console.log(res.data)
            alert(res.data.message);
            // this.setState({
            //   list:res.data,
            // })
          })
    }
  }
  shiwenCtrlc () {
    alert('已复制到剪切板');
  }
  shiwenhover (event) {
    console.log(event.currentTarget)
    console.log($(event.currentTarget).parent().parent().parent().parent().children('.tools'))
    $(event.currentTarget).parent().parent().siblings('.shiwenerwima').css('display','block');
    $(event.currentTarget).attr('class','iconfont icon-xiaoxi_')
    
  }
  shiwenleave (event) {
    console.log(event.currentTarget)
    console.log($(event.currentTarget).parent().siblings('.shiwenerwima'))
    $(event.currentTarget).parent().siblings('.shiwenerwima').css('display','none');
    $(event.currentTarget).children().attr('class','iconfont icon-xiaoxi')
  }
  shiwenAudio (event) {
    var currentAudio = $(event.currentTarget).parent().siblings('.shiwenAudio');
    if(currentAudio.css('display') === 'none') {
      $(event.currentTarget).parent().siblings('.shiwenAudio').css('display','block');
      $(event.currentTarget).children().attr('class','iconfont icon-shengyinyinliangmianxing')
    } else {
      $(event.currentTarget).parent().siblings('.shiwenAudio').css('display','none');
      $(event.currentTarget).children().attr('class','iconfont icon-shengyinyinliangxianxing')
    }
    
  }
  mingjugetmore (event) {
    // console.log(event.currentTarget);
    var currentgetmore =event.currentTarget;
    $(currentgetmore).css('display','none');
    var mingjuyiwen = document.getElementsByClassName('mingjuyiwen')[0];
    // console.log(mingjuyiwen);
    $(mingjuyiwen).css('height','auto')

  }
  mingjugetmores (event) {
    var currentgetmores =event.currentTarget;
    $(currentgetmores).css('display','none');
    var mingjuyiwens = document.getElementsByClassName('mingjushangxicontent')[0];
    $(mingjuyiwens).css('height','auto')

  }

  render () {
    console.log(this.props.data.content);
    const {title, dynasty, name, appreciation, shiaudio, content, material} = this.props.data;
    return (
      <div className="wrrrp">
        <div className="gloabalContent">
          <div className="con">
            <div className="zhushi">
              <ul className="yi_list">
                <li onClick={this.getShowyi.bind(this)}>译</li>
                <li onClick={this.getShowzhu.bind(this)}>注</li>
                <li onClick={this.getShowshang.bind(this)}>赏</li>
                <li>背</li>
              </ul>
            </div>
            <p className="title">
              <b>{title}</b>
            </p>
            <p className="autor">
              <span>{dynasty}</span>
              ：
              <span>{name}</span>
            </p>
            <div className="content">
              {
                content.map((ictm, icdx) => {
                  return (
                    <p key={icdx}>
                      {ictm.shiju}
                      <br />
                      <span className="yi">
                        {ictm.fanyi}
                        <br />
                      </span>
                      <span className="shang">
                      {ictm.zhushi}
                        <br />
                      </span>
                    </p>
                  )
                })
              }
              <p className="appreciation">{appreciation}</p>
              <div className="ziliaowrap">
                <p style={ziliao}>参考资料</p>
                  {
                    this.props.data.material.map((itm, idx) => {
                      return (
                        <div key={idx} style={ziliao1}>
                          {itm}
                        </div>
                      )
                    })
                  }
              </div>
            </div>
          </div>
          <div className="tools">
            <ul className="tool_img">
              <li onClick={this.shiwenCollection.bind(this)}><i className="iconfont icon-shoucang"></i></li>
              <li onClick={this.shiwenCtrlc}><i className="iconfont icon-copy"></i></li>
              <li className="shiwenxiaoxi" onMouseLeave={this.shiwenleave.bind(this)}><i className="iconfont icon-xiaoxi" onMouseEnter ={this.shiwenhover.bind(this)}></i></li>
              <li onClick={this.shiwenAudio.bind(this)}><i className="iconfont icon-shengyinyinliangxianxing"></i></li>
              <li><i className="iconfont icon-bianji"></i></li>
            </ul>
            <div className="shiwenerwima"></div>
            <div className="shiwenAudio">
              <audio src={shiaudio} controls = "controls"></audio>
              <span className=
              "shiwenReaders">(朗诵者：将威威)</span>
            </div>
          </div>
          <div className="tag">
            <ul className="tag_list">
              {
                this.props.data.type.map((ittm, iddx) => {
                  return (
                    <li key={iddx} style={{marginRight:'8px'}}>
                      {ittm}
                    </li>
                  )
                })
              }
            </ul>
          </div>
        </div>
        <div className="yiwenandzhushi">
           <div className="mingjuyiwens" style={{height:'auto'}}>
              <h2 style={{height:'32px', lineHeight:'32px',fontWeight:'blod',fontSize:'16px',color: '#000'}}>译文及注释</h2>
              <div className="mingjuyiwen" style={{height:'190px',overflow:'hidden'}}>
                <p style={{color:'rgba(0, 0, 0, 0.65)'}}>译文</p>
                {
                  content.map((icatm, icadx) => {
                    return (
                      <p key={icadx} style={{marginTop:'5px',height:'auto',color:'rgba(0, 0, 0, 0.65)'}}>
                        {icatm.fanyi}
                        <br></br>
                      </p>                      
                    )
                  })
                }
                <p style={{marginTop:'5px',color:'rgba(0, 0, 0, 0.65)'}}>注释</p>
                {
                  content.map((icatm, icadx) => {
                    return (
                      <p key={icadx} style={{marginTop:'5px',height:'auto',color:'rgba(0, 0, 0, 0.65)'}}>
                        {icatm.zhushi}
                        <br></br>
                      </p>   
                    )
                  })
                }
                <p style={{borderTop:'1px solid #999999',marginTop:'5px',paddingTop:'5px',color:'#999999'}}>参考资料</p>
                {
                  material.map((icatm, icadx) => {
                    return (
                      <p key={icadx} style={{marginTop:'5px',height:'auto',color:'#999999'}}>
                        {icatm}
                        <br></br>
                      </p>   
                    )
                  })
                }
                
              </div>
              <div className="mingjugetmore" onClick={this.mingjugetmore.bind(this)} style={{color:'#19537D',height:'28px',textAlign:'center',lineHeight:'28px'}}>
                  展示更多<i className="iconfont icon-arrow-down"></i>
                </div>
           </div> 
        </div>
        <div className="mingjushangxi">
          <p className="mingjushangxititle" style={{color: '#000'}}>赏析</p>
          <div className="mingjushangxicontent" style={{height:'200px',overflow:'hidden'}}>
            {
              appreciation.map((ictm, icdx) => {
                return (
                  <p key={icdx} style={{textIndent:'10px',marginBottom:'10px',lineHeight:'26px'}}>
                    {ictm}
                  </p>
                )
              })
            }
          </div>
          <div className="mingjugetmores" onClick={this.mingjugetmores.bind(this)} style={{color:'#19537D',height:'28px',textAlign:'center',lineHeight:'28px'}}>
                  展示更多<i className="iconfont icon-arrow-down"></i>
          </div>
        </div>
        
      </div>
    )
  }
}

export default Com;
